<template>
  <div class="container">
      <a-page-header
          title="系统用户统计"
        />
      <div id="main" class="main-block"></div>
  </div>
</template>

<script>
import {getAllUserInfo, activeUser, updateUserRole } from "@/api/user/user"
import { Pie } from '@antv/g2plot';

export default {
    data(){
        return {
          data: [],
          userData: {
            "SYS_ADMIN": 0,
            "DOCTOR" : 0,
            "CLIENT": 0,
          },
          graphData: []
        }
    },
    methods: {
        // 获取系统所有用户信息，统计各个角色的人数
        // 绘制图表
        updateGraph(){
          for(var k in this.userData){
            this.graphData.push({type: k, value: this.userData[k]});
          }
          console.log(this.graphData)
          const piePlot = new Pie('main', {
          appendPadding: 10,
          data: this.graphData,
          angleField: 'value',
          colorField: 'type',
          radius: 0.9,
          label: {
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
              fontSize: 14,
              textAlign: 'center',
            },
          },
          interactions: [{ type: 'element-active' }],
        });

        piePlot.render();
        }
    },
    created(){
      getAllUserInfo()
      .then(data=>{
        var tData = []
        for(var i = 0; i < data.data.length; i++){
          var t = {}
          var d = data.data[i]
          t['username'] = d[0];
          t['accountAddr'] = d[1];
          t['telephone'] = d[2];
          t['email'] = d[3];
          t['identify'] = d[4];
          t['role'] = d[5];
          t['active'] = d[6];
          t['credentials'] = d[8];
          if(t['role'] == 'SYS_ADMIN'){
            if(this.userData['SYS_ADMIN'] == undefined){
              this.userData['SYS_ADMIN'] = 0;
            }
            this.userData['SYS_ADMIN'] ++;
            
          }else if(t['role'] == 'DOCTOR'){
            if(this.userData['DOCTOR'] == undefined){
              this.userData['DOCTOR'] = 0;
            } 
            this.userData['DOCTOR'] ++;
            
          }else if(t['role'] == 'CLIENT'){
            if(this.userData['CLIENT'] == undefined){
              this.userData['CLIENT'] = 0;
            }
            this.userData['CLIENT'] ++;
          }
          tData.push(t)
        }
        this.data = tData;
        console.log(this.userData)
        this.updateGraph()
      })
      .catch(err=>{
        console.log(err);
        this.$message.error("获取用户信息失败")
      })
    }
}
</script>

<style lang="less" scoped>
.container{
    margin: auto;
    width: 90%;
    min-height: 700px;
    // margin-top: 30px;
    margin-bottom: 30px;
    background-color: aliceblue;
}

.table-container{
    min-height: 700px;

}

.main-block{
  display: block;
  width: 500px;
  height: 500px;
  margin: auto
}
</style>